<template>
  <div class="container">
    <topTitle
      :titleText="titleText"
      :back="back"
      @gobackTriser="goBack"
    ></topTitle>
    <div class="mainCon">
      <el-tabs
        v-model="activeName"
        @tab-click="handleClick"
        class="commonTab"
        type="card"
      >
        <el-tab-pane label="用户账号" name="first">
          <userAccount
            :eventType="accountType"
            :id="id"
            v-if="userAccount"
            @eventTypeChanged="typeChange(arguments)"
            :typeDesc="typeDesc"
          ></userAccount>
        </el-tab-pane>
        <el-tab-pane
          label="用户资料"
          name="second"
          v-if="eventType == 'detail'"
        >
          <userInfo
            :eventType="infoType"
            v-if="userInfo"
            @InfoChanged="infoTypeChange($event)"
            :id="id"
          ></userInfo>
        </el-tab-pane>
        <el-tab-pane label="用户角色" name="third" v-if="eventType == 'detail'">
          <userRole ref="userRole" v-if="userRole" :id="id"></userRole>
        </el-tab-pane>
      </el-tabs>
      <el-button
        type="primary"
        class="commonBut saveBtn operateBtn"
        icon="icon iconfont icontianjia"
        @click="updateAccount"
        v-if="
          activeName === 'first' && accountType === 'detail' && isShowUpdate
        "
      >
        <span class="opetareText">编辑账号</span>
      </el-button>
      <el-button
        type="primary"
        class="commonBut saveBtn operateBtn"
        icon="icon iconfont icontianjia"
        @click="updateInfo"
        v-if="activeName === 'second' && infoType === 'detail' && isShowUpdate"
      >
        <span class="opetareText">编辑资料</span>
      </el-button>
      <el-button
        type="primary"
        class="commonBut saveBtn operateBtn"
        icon="icon iconfont icontianjia"
        @click="addRole"
        v-if="activeName === 'third' && isShowUpdate"
      >
        <span class="opetareText">添加角色</span>
      </el-button>
    </div>
  </div>
</template>

<script>
import userAccount from '@/components/baseSettings/userAccount'
import userInfo from '@/components/baseSettings/userInfo'
import userRole from '@/components/baseSettings/userRole'
export default {
  name: 'userManageTab',
  components: {
    userAccount,
    userInfo,
    userRole,
  },
  data() {
    return {
      titleText: '用户管理',
      back: true,
      activeName: 'first',
      eventType: '',
      accountType: 'detail', //用户账号事件
      infoType: 'detail', //用户资料事件
      id: '',
      userAccount: true,
      userInfo: false,
      userRole: false,
      typeDesc: '',
      isShowUpdate: '',
    }
  },
  created() {
    this.activeName = this.$route.query.itemTab
      ? this.$route.query.itemTab
      : 'first'
    this.eventType = this.$route.query.eventType
    this.id = this.$route.query.id
    this.typeDesc = this.$route.query.typeDesc
    if (this.activeName === 'first') {
      this.accountType = this.eventType
    }
    if (this.activeName === 'second') {
      this.infoType = this.eventType
      this.userInfo = true
      this.userAccount = false
      this.userRole = false
    }
    if (this.activeName === 'third') {
      this.userRole = true
      this.userAccount = false
      this.userInfo = false
    }
    this.isShowUpdate =
      this.$store.state.buttonLimitsArr.indexOf('user:update') > -1
  },
  methods: {
    //返回
    goBack() {
      this.$router.push({
        path: '/home/baseSettings/userManageList',
        name: 'userManageList',
      })
      this.$store.commit('GOBACK_NAME', {
        oldUrl: '/home/baseSettings/userManageList',
        newUrl: this.$router.currentRoute.fullPath,
      })
    },
    //切换tab
    handleClick(tab, event) {
      if (tab.label == '用户账号') {
        this.userAccount = true
      } else if (tab.label == '用户资料') {
        this.userInfo = true
      } else if (tab.label == '用户角色') {
        this.userRole = true
      }
    },
    //编辑账号
    updateAccount() {
      this.accountType = 'update'
    },
    //编辑资料
    updateInfo() {
      this.infoType = 'update'
    },
    //添加角色
    addRole() {
      this.$refs.userRole.addRole()
    },
    typeChange(data) {
      this.accountType = data[0]
      this.id = data[1]
      this.activeName = 'first'
      this.eventType = 'detail'
    },
    infoTypeChange(msg) {
      this.infoType = msg
      this.activeName = 'second'
    },
  },
}
</script>

<style scoped lang="less">
.container {
  .mainCon {
    height: calc(100% - 67px);
    overflow-y: auto;
    padding-top: 0;
    .operateBtn {
      width: auto;
      padding: 0 15px;
      position: absolute;
      top: 7px;
      right: 24px;
    }
  }
}
</style>
